function $(selector) {
  return document.querySelector(selector);
}
function $$(selector) {
  return document.querySelectorAll(selector);
}
/*
container:为那个区域设置轮播
duration：多长时间轮播一次，0表示不自动轮播
callback：轮播结束后的回调函数,
*/
function createSlider(container,duration,callback) {
  //找到container下的第一个子元素，设置其的margin-left就可以实现轮播
  let firstItem = container.querySelector('.slider-item');
  //获取容器的宽度
  let cw = container.clientWidth;
  //获取子元素的数量
  let count = container.children.length;
  //让轮播的时候有动画，而不是一下就过去的
  firstItem.style.transition = '1s';
  //定义定时器
  let timer = null;
  //记录当前的索引
  let currentIndex = 0;
  //切换到指定的子项
  function switchTo(index) {
    if (index < 0) { index = 0; }
    if(index > count-1) { index = count - 1; }
    currentIndex = index;
    firstItem.style.marginLeft = -index * cw + 'px';
    //触发回调函数
    callback && callback(index);
  }
  //实现自动切换
  function autoPlay() {
    if (timer || duration === 0) {
      return;
    }
    timer = setInterval(() => {
      switchTo((currentIndex+1)%count)
    }, duration);
  }
  autoPlay();
  //停止自动切换
  function stopAutoPlay() {
    clearInterval(timer);
    timer = null;
  }
  //手指滑动切换
  container.ontouchstart = function (e) {
    //手指移上去的时候需要停止自动切换
    stopAutoPlay();
    //不需要过渡效果
    firstItem.style.transition = 'none';
    let x = e.touches[0].clientX;
    let y = e.touches[0].clientY;
    // 获取第一个元素的marginleft值，以便于让其与手指移动的距离相等
    let ml = parseFloat(firstItem.style.marginLeft) || 0;
    //当手指在上面移动的时候
    container.ontouchmove = function(e) {
      //最大和最小可以滑动的距离
      let minMl = -(count - 1) * cw;
      //获取移动的距离
      let disX = e.touches[0].clientX - x;
      let disY = e.touches[0].clientY - y;
      //得到新的距离
      let newMl = ml + disX;
      if(newMl < minMl) {
        newMl = minMl;
      }
      if (newMl > 0) {
        newMl = 0;
      }
      //去掉浏览器的默认行为
      e.preventDefault();
      //设置firstItem的marginleft值
      firstItem.style.marginLeft = newMl + 'px';
    }
    //手指放开的时候 -> 1.如果是向左滑动，松开手指的时候应该取整，反正也一样 2. 开启自动切换
    container.ontouchend = function(e) {
      //手指在横轴上移动了多远
      var disX = e.changedTouches[0].clientX - x; 
      //将过渡动画设置回去
      firstItem.style.transition = '1s';
      if (disX < -30) {
        switchTo(currentIndex + 1);
      }
      if(disX > 30){
        switchTo(currentIndex - 1);
      }
      //开启自动切换
      autoPlay();
    }
  }
  return switchTo;
}
//横幅广告区域
(function () {
  //找到小点
  let dots = $('.banner .dots')
  createSlider($('.banner .slider-container'),2000,function(index) {
    //将有active的元素移除
    let ac = $('.active');
    ac && ac.classList.remove('active')
    dots.children[index].classList.add('active')
  })
})();

//menu区域
(function () {
  //用变量保存当前的状态，默认是折叠的
  let isExpand = false;
  //获取到文字区域
  let txt = $('.expand .txt');
  //获取到spr区域
  let spr = $('.expand .spr');
  //h获取到列表区域
  let menuList = $('.menu-list');
  //获取到需要操作的区域
  $('.menu .expand').addEventListener('click',function() {
    if(isExpand) {
      //当前是展开的
      txt.innerText ='展开'
      spr.classList.add('spr_expand');
      spr.classList.remove('spr_collapse');
      menuList.style.flexWrap = 'nowrap';
    }else {
      //当前是折叠的,点后变成展开
      txt.innerText ='折叠';
      spr.classList.add('spr_collapse');
      spr.classList.remove('spr_expand');
      menuList.style.flexWrap = 'wrap';
    }
    isExpand = !isExpand;
  })
})();

/**
 * 对原先的轮播代码还是不是很满意，希望轮播的时候上面的标题也可以跟着一起显示，并且点击标题可以切换
 * @param {*} blockContainer 
 */
function createBlock(blockContainer) {
  /*需要完成的事情
    1.该区域可以轮播
    2.轮播的时候上面的标题需要切换
    3.可以点击标题切换
  */
  //找到相对于的区域
  let sliderContainer = blockContainer.querySelector('.slider-container');
  //找到菜单容器
  let blockMenu = blockContainer.querySelector('.block-menu');
  //实现上面的标题可以跟着一起切换
  let goto = createSlider(sliderContainer,0,function(index) {
    //找到当前选中的元素，将类名移除
    let ac = blockMenu.querySelector('.active');
    ac && ac.classList.remove('active')
    //为当前index元素添加类样式
    blockMenu.children[index].classList.add('active');
  });
  //实现点击切换
  [...blockMenu.children].forEach((item,index) => {
    item.addEventListener('click',function() {
      goto(index);
    })
  })
}

//新闻资讯区域
(async function() {
  //找到slider-container,需要为里面创建元素
  let sliderContainer = $('.news-list .slider-container');
  //请求数据
  var resp = await fetch('./data/news.json').then(function(resp) {
    return resp.json();
  });
  for (const key in resp) {
    //将每一项映射成为
    let news = resp[key].map(item => {
      return `<div class="news-item ${item.type}">
        <a href="${item.link}">${item.title}</a>
        <span>${item.pubDate}</span>
      </div>`
    }).join('');
    //创建一个div
    let div = document.createElement('div');
    //为div添加class
    div.classList.add('slider-item');
    //将元素插入到相对应的位置上
    sliderContainer.appendChild(div);
    //生成slider-item和其内容
    div.innerHTML = news;
    sliderContainer.appendChild(div);
  }
  createBlock($('.news-list'));
})();



//英雄区域
(async function () {
  //找到需要插入子元素的父元素
  var sliderContainer = $('.hero-list .slider-container');
  /* 1-战士 2-法师 3-坦克 4-刺客 5-射手 6-辅助 */
  //fetch发送请求，拿到数据
  let resp = await fetch('./data/hero.json').then((resp) => {
    return resp.json();
  })
  //创建热门英雄
  createSliderItem(
    resp.filter(item => {
      return item.hot === 1;
    })
  )
  //得到每一种类型的数据
  for(let i = 1;i <= 6;i++) {
    createSliderItem(
      resp.filter(function(item) {
        return item.hero_type == i || item.hero_type2 === i
      })
    )
  }
  function createSliderItem(heros) {
    //创建div
    let div = document.createElement('div');
    div.classList.add('slider-item');
    div.innerHTML = heros.map(function(item) {
      return `<a>
        <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/${item.ename}/${item.ename}.jpg"></img>
        <span>${item.cname}</span>
      </a>`
    }).join('');
    sliderContainer.appendChild(div);
  }
  createBlock($('.hero-list'));
})();

//视频区域
(async function() {
  //1.拿到需要插入子元素的父元素
  let sliderContainer = $('.video-list .slider-container');
  //2.发请求，拿数据
  let resp = await fetch('./data/video.json').then(resp => {
    return resp.json();
  });
  //循环resp，将每一项变成映射成为一个子元素
  for (const key in resp) {
    let videos = resp[key];
    //创建一个slider-item
    let div = document.createElement('div');
    div.classList.add('slider-item');
    let html = videos.map(item => {
      return `<a href="${item.link}">
        <img src="${item.cover}">
        <div class="title">${item.title}</div>
        <div class="aside">
          <div class="play">
            <span class="spr spr_videonum"></span>
            <span>${item.playNumber}</span>
          </div>
          <div class="time">${item.pubDate}</div>
        </div>
      </a>`;
    }).join('');
    console.log(html);
    div.innerHTML = html;
    sliderContainer.appendChild(div);
  }
  createBlock($('.video-list'));
})();